<template>
	<view class="container">
		<view class="container-t">
			<scroll-view scroll-x="true" class="scroll-container">
				<view class="product-list">
					<view v-for="(item, index) in shopList" :key="index"
						:class="['product-item',index==shopIndex?'product-item-active':'']">
						<image :src="item.image" mode="aspectFill" class="product-image"></image>
						<text class="product-name">{{ item.name }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="nav-sousuo">
			<i class="iconfont icon-sousuo sou-suo" />
			<input class="sou-suo-input" placeholder-style="color:#9a9b9d" v-model="searchName" type="text" />
			<view class="nav-sousuo-text">
				搜索
			</view>
		</view>
		<view class="container-b">
			<!-- 左侧导航栏 -->
			<scroll-view scroll-y="true" class="nav-bar" :scroll-into-view="'nav-' + activeNav">
				<view v-for="(item, index) in navList" :key="index" :id="'nav-' + index"
					:class="['nav-item', activeNav === index ? 'active' : '']" @click="scrollToSection(index)">
					{{ item }}
				</view>
			</scroll-view>

			<!-- 右侧商品列表 -->
			<scroll-view scroll-y="true" class="product-list" :scroll-into-view="'section-' + activeNav"
				@scroll="onScroll">
				<view v-for="(item, index) in productList" :key="index" :id="'section-' + index"
					class="product-section">
					<view class="section-title">{{ navList[index] }}</view>
					<view v-for="(product, pIndex) in item" :key="pIndex" class="shop-item">
						<!-- 商品图片 -->
						<image :src="product.image" mode="aspectFill" class="shop-image"></image>
						<!-- 商品信息 -->
						<view class="shop-info">
							<!-- 标题 -->
							<text class="shop-title">{{ product.title }}</text>
							<!-- 时间 -->
							<text class="shop-time">时间：{{ product.time }}</text>
							<!-- 地点 -->
							<text class="shop-location">地点：{{ product.location }}</text>
							<!-- 价格 -->
							<text class="shop-price">￥{{ product.price }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				searchName: '',
				// 导航栏数据
				navList: ['推荐', '手机', '电脑', '家电', '服饰', '食品'],
				activeNav: 0, // 当前选中的导航项
				// 商品列表数据
				productList: [
					[{
							image: 'https://img01-gms.17zwd.com/imgextra01/61336614/i2/515677600375505480.jpg',
							title: '推荐商品1',
							price: '99.99'
						},
						{
							image: 'https://via.placeholder.com/200x200?text=Product+2',
							title: '推荐商品2',
							price: '89.99'
						}
					],
					[{
							image: 'https://img01-gms.17zwd.com/imgextra01/61336614/i2/515677600375505480.jpg',
							title: '手机商品1',
							price: '1999.99'
						},
						{
							image: 'https://via.placeholder.com/200x200?text=Product+4',
							title: '手机商品2',
							price: '2999.99'
						}
					],
					[{
							image: 'https://img01-gms.17zwd.com/imgextra01/61336614/i2/515677600375505480.jpg',
							title: '电脑商品1',
							price: '4999.99'
						},
						{
							image: 'https://via.placeholder.com/200x200?text=Product+6',
							title: '电脑商品2',
							price: '5999.99'
						}
					],
					[{
							image: 'https://via.placeholder.com/200x200?text=Product+7',
							title: '家电商品1',
							price: '999.99'
						},
						{
							image: 'https://img01-gms.17zwd.com/imgextra01/61336614/i2/515677600375505480.jpg',
							title: '家电商品2',
							price: '1999.99'
						}
					],
					[{
							image: 'https://via.placeholder.com/200x200?text=Product+9',
							title: '服饰商品1',
							price: '199.99'
						},
						{
							image: 'https://via.placeholder.com/200x200?text=Product+10',
							title: '服饰商品2',
							price: '299.99'
						}
					],
					[{
							image: 'https://via.placeholder.com/200x200?text=Product+11',
							title: '食品商品1',
							price: '19.99'
						},
						{
							image: 'https://via.placeholder.com/200x200?text=Product+12',
							title: '食品商品2',
							price: '29.99'
						}
					]
				],
				shopList: [{
						image: 'https://img01-gms.17zwd.com/imgextra01/61336614/i2/515677600375505480.jpg',
						name: '商品1',
						price: '99.99'
					},
					{
						image: 'https://qcloud.dpfile.com/pc/As5tfeAJ3bNz0EHihrTx4WJThVNQ8kb0ttUPBSmOWSUDY_ZFhBScrG7sKiYM3WjS.jpg',
						name: '商品2',
						price: '89.99'
					}, {
						image: 'https://img01-gms.17zwd.com/imgextra01/61336614/i2/515677600375505480.jpg',
						name: '商品1',
						price: '99.99'
					},
					{
						image: 'https://qcloud.dpfile.com/pc/As5tfeAJ3bNz0EHihrTx4WJThVNQ8kb0ttUPBSmOWSUDY_ZFhBScrG7sKiYM3WjS.jpg',
						name: '商品2',
						price: '89.99'
					},
					{
						image: 'https://qcloud.dpfile.com/pc/As5tfeAJ3bNz0EHihrTx4WJThVNQ8kb0ttUPBSmOWSUDY_ZFhBScrG7sKiYM3WjS.jpg',
						name: '商品2',
						price: '89.99'
					}
				],
				// 商品列表每个分类的高度
				sectionHeights: [],
				// 商品列表的滚动位置
				scrollTop: 0
			};
		},

		computed: {
			//login_status 0 未登录 、1临时微信登录 2已登录
			...mapGetters([
				'login_status',

			]),

		},
		mounted() {
			// 计算每个分类的高度
			this.calculateSectionHeights();
		},
		methods: {
			// 计算每个分类的高度
			calculateSectionHeights() {
				const query = uni.createSelectorQuery().in(this);
				this.sectionHeights = [];
				this.navList.forEach((_, index) => {
					query.select(`#section-${index}`).boundingClientRect((rect) => {
						if (rect) {
							this.sectionHeights.push(rect.height);
						}
					}).exec();
				});
			},

			// 监听商品列表滚动
			onScroll(e) {
				this.scrollTop = e.detail.scrollTop;
				let heightSum = 0;
				for (let i = 0; i < this.sectionHeights.length; i++) {
					heightSum += this.sectionHeights[i];
					if (this.scrollTop < heightSum) {
						this.activeNav = i;
						break;
					}
				}
			},

			// 点击导航项滚动到对应分类
			scrollToSection(index) {
				this.activeNav = index;
				this.$nextTick(() => {
					uni.pageScrollTo({
						selector: `#section-${index}`,
						duration: 300
					});
				});
			}
		}
	};
</script>

<style lang="less">
	page {
		height: 100vh;
		background-color: white;
	}

	.container {
		height: 100%;
		overflow: hidden;
	}

	.nav-sousuo {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 0 15rpx;
		box-sizing: border-box;
		position: relative;
		font-size: 28rpx;
		color: #2e2e2e;

		.sou-suo {
			position: absolute;
			z-index: 1;
			color: white;
			left: 60rpx;
		}

		.sou-suo-input {
			flex: 1;
			height: 60rpx;
			background-color: #f7f8fa;
			margin: 0 auto;
			border-radius: 60rpx;
			padding: 0 50rpx 0 80rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			color: #9a9b9d;
			line-height: 60rpx;
			width: 100%;
			overflow: hidden;

			.swiper1View {
				white-space: nowrap;
			}
		}

		.nav-sousuo-text {
			padding-left: 15rpx;
		}
	}

	.container-t {
		height: 190rpx;
		align-items: center;
		display: flex;

		.scroll-container {
			white-space: nowrap;
			/* 防止换行 */
			width: 100%;
			padding: 5rpx 0 0rpx;

			.product-list {
				display: inline-flex;
				height: ;
				/* 横向排列 */
			}

			.product-item {
				text-align: center;
				width: 173rpx;
				height: 150rpx;
				margin-right: 15rpx;
			}

			.product-image {
				width: 95rpx;
				height: 95rpx;
				border-radius: 50%;
			}

			.product-name {
				display: block;
				font-size: 18rpx;
				margin-top: 5rpx;
			}
		}
	}

	.container-b {
		display: flex;
		height: calc(100% - 190rpx);
		overflow: hidden;
		margin-top: 20rpx;

		/* 左侧导航栏 */
		.nav-bar {
			height: 100%;
			width: 200rpx;
			background-color: #f8f8f8;
			padding: 20rpx 0;
		}

		/* 导航项 */
		.nav-item {
			padding: 20rpx;
			font-size: 28rpx;
			text-align: center;
			color: #333;
		}

		/* 选中状态的导航项 */
		.nav-item.active {
			background-color: #fff;
			color: #ff5000;
			font-weight: bold;
		}

		/* 右侧商品列表 */
		.product-list {
			flex: 1;
			padding: 20rpx;
		}

		/* 商品分类标题 */
		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		/* 单个商品项 */
		.shop-item {
			display: flex;
			align-items: center;
			padding: 0 15rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		}

		/* 商品图片 */
		.shop-image {
			border-radius: 10rpx;
			width: 200rpx;
			height: 200rpx;
		}

		/* 商品信息 */
		.shop-info {
			flex: 1;
			padding: 20rpx;
		}

		/* 商品标题 */
		.shop-title {
			display: block;
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}

		.shop-time {
			display: block;
			font-size: 28rpx;
			color: #666;
			margin-bottom: 5rpx;
		}

		/* 商品标题 */
		.product-title {
			display: block;
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}

		/* 商品价格 */
		.product-price {
			display: block;
			font-size: 28rpx;
			color: #ff5000;
		}
	}
</style>